<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <title>Bootstrap 搜索建议插件</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件">
  <meta name="Keywords" content="Bootstrap Search Suggest,bootstrap,搜索建议插件">
  <meta name="author" content="http://lzw.me">
  <!-- cdnsite: https://cdnjs.com/ -->
  <link id="bscss" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet">
  <style>
    h3{
      margin-top: 1.2rem;
      border-bottom: 1px #eee solid;
    }
    .row{
      margin-bottom: 10px;
    }
    .pd5{
      padding: 5px;
    }
    .pd10{
      padding: 10px;
    }
    .mg5 {
      margin: 5px;
    }
    .mg10 {
      margin: 10px;
    }
    .mb10 {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
<div class="modal fade" id="modalTest">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <ul>
          <li>不显示按钮；<code>showBtn: false</code></li>
          <li>向上/下方向键，不自动选中值。<code>autoSelect: false</code></li>
        </ul>
        <div class="input-group">
          <input type="text" class="form-control" id="modalTest_input" autocomplete="off">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-primary-outline" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="container">
  <h2>bootstrap combox 搜索建议插件</h2>
  <p>这是一个基于 bootstrap 按钮式下拉菜单组件 (
    <a target="_blank" href="https://getbootstrap.com/docs/3.4/components/#input-groups-buttons-dropdowns">V3</a> /
    <a target="_blank" href="https://getbootstrap.com/docs/4.3/components/input-group/#buttons-with-dropdowns">V4</a>
    ) 的搜索建议插件。</p>

  <ul>
    <li>使用说明：
      <a href="https://github.com/lzwme/bootstrap-suggest-plugin" target="_blank">Github</a>
    </li>

    <li>独立引用(不依赖 bootstrap 方式示例)： <a href="index-sep.html" target="_blank">BSV3</a></li>

    <li>使用示例：
      <a class="btn btn-info" href="https://github.com/lzwme/bootstrap-suggest-plugin/blob/master/demo/demo.js" target="_blank">demo.js</a>
      <a class="btn btn-info" href="../test/" target="_blank">功能测试</a>
    </li>
  </ul>
  <p id="bsVersion">
    <button class="btn btn-success btn-success-outline" data-version="3.4.1">bootstrap 3.4.1</button>
    <button class="btn btn-success btn-success-outline" data-version="4.3.1">bootstrap v4.3.1</button>
  </p>

  <div>
    <h3>测试(首次从 URL 获取数据)</h3>
    <p>配置了 data-id，非下拉菜单选择输入则背景色警告。</p>

    <p id="methodTest">
      <button class="btn btn-success btn-success-outline">disable</button>
      <button class="btn btn-success btn-success-outline">enable</button>
      <button class="btn btn-success btn-success-outline">show</button>
      <button class="btn btn-success btn-success-outline">hide</button>
      <button class="btn btn-success btn-success-outline">version</button>
      <button class="btn btn-success btn-success-outline">destroy</button>
      <button class="btn btn-success btn-success-outline">init</button>
    </p>

    <div class="row">
      <div class="col-lg-2">
        <div class="input-group">
          <input type="text" class="form-control" id="test" placeholder="keywords...">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
    </div>

    <h3>测试(modal 中显示；不自动选中值；不显示按钮；)</h3>
    <a class="btn btn-primary" data-toggle="modal" data-target="#modalTest">modal test</a></p>

    <h3>测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，显示清除按钮)</h3>
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control" id="testNoBtn">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
    </div>
    <p>
      <br><code>clearable: true,</code> //可清除已输入内容
      <br><code>ignorecase: true,</code> //忽略大小写
      <br><code>effectiveFieldsAlias:{userName: "姓名"},</code> //有效字段别名
      <br><code>showHeader: true,</code> //显示 header
      <br><code>showBtn: false,</code> //不显示下拉按钮
      <br><code>delayUntilKeyup: true</code> //获取数据方式为 firstByUrl 时，延迟到有输入/获取到焦点时请求
    </p>
    <p><b>提示：</b>
      <br><code>clearable</code> 参数使用了 <code>glyphicons</code> 图标。<code>bootstrap v4</code> 默认不带该图标样式，所以该参数不会生效。此时可自行在 <code>html</code> 代码的 <code>input</code> 输入框标签前添加 <code>i.clearable</code> 标签元素来实现。
      <br>例如，页面中引入了 <code>font-awesome</code>，可添加标签为（见下一个示例）：
    <pre class="bg-info pd10">
&lt;i class="clearable fa fa-remove"&gt;&lt;/i&gt;
</pre>
    </p>

    <h3>测试(json 数据中获取)</h3>
    <p>默认启用空关键字检索。</p>
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <i class="clearable fa fa-remove"></i>
          <input type="text" class="form-control" id="test_data">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              测试
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
    </div>

    <h3>百度搜索</h3>
    <p>支持逗号分隔多关键字</p>
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group" style="width: 300px;">
          <input type="text" class="form-control" id="baidu">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
    </div>
    <p>
      <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
      <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
      <br><code>separator: ",",</code>         //多关键字支持时的分隔符
      <br><code>getDataMethod: "url"</code>    //总是从 URL 获取数据
    </p>

    <h3>百度搜索(预处理关键字)</h3>
    <p>支持逗号分隔多关键字</p>

    <div class="row">
      <div class="col-md-6">
        <div class="input-group">
          <span class="input-group-addon" id="sizing-addon2">设置前置关键字</span>
          <input type="text" class="form-control" id="preKeyword" value="魅族" placeholder="输入搜索前置关键字"  aria-describedby="sizing-addon2">
        </div>
      </div>
    </div>
    <p></p>
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control" id="baiduPreKeyword">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
    </div>
    <p>
      <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
      <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
      <br><code>separator: ",",</code>         //多关键字支持时的分隔符
      <br><code>getDataMethod: "url",</code>   //获取数据的方式，总是从 URL 获取
    </p>
    <pre class="bg-info pd10">fnPreprocessKeyword: function(keyword) {
//请求数据前，对输入关键字作预处理
    return $.trim($('#preKeyword').val()) + keyword;
}</pre>


    <h3>百度搜索(ajax 请求前回调调整参数)</h3>
    <div class="row">
      <div class="col-md-6">
        <div class="input-group">
          <span class="input-group-addon" id="sizing-addon2">预定义关键字</span>
          <input type="text" class="form-control" id="customKeyword" value="flyme " placeholder="输入搜索前置关键字"  aria-describedby="sizing-addon2">
        </div>
      </div>
    </div>
    <p></p>
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control" id="baiduAdjustAjaxParam" value="5">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
    </div>
    <p>
      <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
      <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
      <br><code>separator: ",",</code>         //多关键字支持时的分隔符
      <br><code>getDataMethod: "url",</code>   //总是从 URL 获取数据
    </p>
    <pre class="bg-info pd10">
fnAdjustAjaxParam: function(keyword, opts) {
//调整 ajax 请求参数方法，用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
    console.log('ajax 请求参数调整：', keyword, opts);
    return {
        timeout: 10000,
        data: {
            t: (new Date()).getTime(),
            wd: $('#customKeyword').val() +  keyword
        }
    };
}
</pre>

    <h3>淘宝搜索 <sub><a href="https://jsfiddle.net/renxia/2qafjffp/" target="_blank">试一试</a></sub></h3>
    <p>支持逗号分隔多关键字，并展示列表表头。</p>
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control" id="taobao">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
          </div>
          <!-- /btn-group -->
        </div>
      </div>
    </div>

    <p>
      <br><code>allowNoKeyword: false,</code>  //无输入时不执行过滤请求
      <br><code>multiWord: true,</code>        //以分隔符号分割的多关键字支持
      <br><code>separator: ",",</code>         //多关键字支持时的分隔符
      <br><code>getDataMethod: "url",</code>   //总是从 URL 获取数据
      <br><code>autoDropup: true,</code>       //自动判断向上/下
      <br><code>showHeader: true,</code>       //显示多个字段的表头
      <br><code>effectiveFieldsAlias: {Id: "序号", Keyword: "关键字", Count: "数量"}</code> //showHeader 时，header 别名
    </p>
  </div>
</div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script id="bsjs" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="../src/bootstrap-suggest.js?ver=201911180900"></script>
<script src="demo.js?ver=201911180900"></script>
</body>

</html>